<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 新增分类
  .modal-content
    .form-item
      .form-item-label 材料分类级别：
      .form-item-value
        el-select(v-model="level" @change="changeLevel")
          el-option(v-for="item, index in levelOptions", :key="index", :label="item.label", :value="item.value")
    .form-item(v-if="level == 2 || level == 3 || level == 4")
      .form-item-label.important 一级分类：
      .form-item-value
        el-select(v-model="firstCateId" placeholder="请选择一级分类" @change="changeCate($event, 'secendCate')")
          el-option(v-for="item in firstCate", :key="item.classificationId", :label="item.classificationName", :value="item.classificationId")
    .form-item(v-if="level == 3 || level == 4")
      .form-item-label.important 二级分类：
      .form-item-value
        el-select(v-model="secendCateId" placeholder="请先选择一级分类" @change="changeCate($event, 'threeCate')")
          el-option(v-for="item in secendCate", :key="item.classificationId", :label="item.classificationName", :value="item.classificationId")
    .form-item(v-if="level == 4")
      .form-item-label.important 三级分类：
      .form-item-value
        el-select(v-model="threeCateId" placeholder="请先选择二级分类" @change="changeCate($event, 'fourCate')")
          el-option(v-for="item in threeCate", :key="item.classificationId", :label="item.classificationName", :value="item.classificationId")
    .form-item
      .form-item-label.important 分类名称：
      .form-item-value
        el-input(v-model="form.classificationName" placeholder="请输入分类名称")
    .form-item
      .form-item-label.important 分类编码：
      .form-item-value
        el-input(v-model="form.classificationCode" placeholder="自动获取", :readonly="level != 1")
    .form-item
      .form-item-label.important 分类权重：
      .form-item-value
        el-input(v-model="form.value" placeholder="自动获取" type="number")
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { getChildrenClassifications, postAddCategory } from 'api'
export default {
  name: 'addCategoryDialog',
  props: {
    show: Boolean
  },
  data () {
    return {
      level: '',
      firstCateId: '',
      secendCateId: '',
      threeCateId: '',
      levelOptions: [
        { label: '一级分类', value: 1 },
        { label: '二级分类', value: 2 },
        { label: '三级分类', value: 3 },
        { label: '四级分类', value: 4 }
      ],
      form: {
        classificationName: '',
        parentId: '',
        value: '',
        classificationCode: '',
      },
      firstCate: [],
      secendCate: [],
      threeCate: []
    }
  },
  methods: {
    beforeOpen () {
      this.level = ''
      this.form = {
        classificationName: '',
        parentId: '',
        value: '',
        classificationCode: '',
      }
    },
    changeLevel (value) {
      this.firstCateId = ''
      this.secendCateId = ''
      this.threeCateId = ''
      this.form.classificationCode = ''
      if (value > 1) this.getCateList('firstCate')
    },
    changeCate (value, key) {
      if (key === 'secendCate') {
        this.secendCateId = ''
        this.threeCateId = ''
        this.form.classificationCode = ''
      } else if (key === 'threeCate') {
        this.threeCateId = ''
        this.form.classificationCode = ''
      }
      if (this.level === 2 && key === 'secendCate') {
        let item = this.firstCate.find(item => item.classificationId === value)
        this.form.classificationCode = item.classificationCode
        this.form.value = item.value
      } else if (this.level === 3 && key === 'threeCate') {
        let item = this.secendCate.find(item => item.classificationId === value)
        this.form.classificationCode = item.classificationCode
        this.form.value = item.value
      } else if (this.level === 4 && key === 'fourCate') {
        let item = this.threeCate.find(item => item.classificationId === value)
        this.form.classificationCode = item.classificationCode
        this.form.value = item.value
      }
      if (key !== 'fourCate') this.getCateList(key, value)
    },
    async getCateList (key, id = 0) {
      try {
        const { ResultSet } = await this.$axios.post(getChildrenClassifications, { classificationId: id })
        this[key] = ResultSet.userData.childrenNode
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleClose () {
      this.$emit('close')
    },
    async confirm () {
      try {
        if (!this.level) {
          this.$message.error('请先选择分类级别')
          return
        }
        if (this.level === 1) this.form.parentId = 0
        else if (this.level === 2) this.form.parentId = this.firstCateId
        else if (this.level === 3) this.form.parentId = this.secendCateId
        else if (this.level === 4) this.form.parentId = this.threeCateId
        if (this.form.parentId === '') {
          this.$message.error('请先选择分类')
          return
        }
        if (!this.form.classificationName) {
          this.$message.error('请先输入分类名称')
          return
        }
        if (!this.form.classificationCode) {
          this.$message.error('请先输入分类编码')
          return
        }
        if (this.form.value === '') {
          this.$message.error('请先输入分类权重')
          return
        }
        await this.$axios.post(postAddCategory, { ...this.form })
        this.$message.success('添加成功！')
        this.$emit('confirm')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  .form-item-label {
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #8B8EAB;
    min-width: 110px;
    &.important {
      &:before {
        content: '*';
        color: #F64C4C;
        margin-right: 5px;
      }
    }
  }
  .form-item-value {
    flex: 1;
    .el-select {
      width: 100%;
    }
  }
}
</style>
